import React from 'react';
import styles from './index.less';
import { connect, connectMaster } from 'umi';
import { Form, Button, Input, Card, message, Modal, Row, Col } from 'antd';
import { PlusOutlined, UserOutlined } from '@ant-design/icons';

import RoleDrawer from './RoleDrawer';
import { Subject } from 'rxjs-compat';
import commonPkg from '@/utils/commonPkg';

import { getMasterCommonPkg } from '@/utils/masterData';
const {
  utils: {
    otherUtil: { authorityVerify },
  },
} = getMasterCommonPkg();

const { images } = commonPkg;
@connectMaster //接收主服务数据
@connect(({ Role }) => ({ Role }))
export default class extends React.Component {
  state = {
    search: '',
  };

  componentDidMount = async () => {
    this.eventInit();
    this.getAuthList();
    this.getRoleList();
  };

  eventInit = () => {
    this.searchChangeEvent = new Subject();
    //(防抖)
    this.searchChangeEvent.debounceTime(300).subscribe(data => {
      this.getRoleList({ pageNum: 1 });
    });
  };
  //获得用户权限列表
  getAuthList = async () => {
    var rs = await this.props.dispatch({
      type: 'Role/getAuthList',
    });

    //失败
    if (!rs.success) {
      // message.error('删除失败');
    }
    // 成功
    if (rs.success) {
      this.changeState({
        roleAuthList: rs.data,
      });
    }
  };

  //获取角色列表
  getRoleList = async (params = {}) => {
    var reqData = {
      pageNum: 1,
      pageSize: 10000000,
      ...params,
    };
    if (this.state.search) reqData.roleName = this.state.search;

    var rs = await this.props.dispatch({
      type: 'Role/getRoleList',
      payload: reqData,
    });
    // 成功
    if (rs.success) {
      this.changeState({
        roleList: rs.data.dataList,
      });
    }
  };

  //删除角色
  deleteRole = id => {
    Modal.confirm({
      title: '你确定要删除吗?',
      content: '你确定要删除吗?',
      centered: true,
      onOk: async () => {
        // 走接口删除
        var rs = await this.props.dispatch({
          type: 'Role/deleteRoleInfoById',
          payload: { id: id },
        });

        //失败
        if (!rs.success) {
          message.error('删除失败');
        }
        // 成功
        if (rs.success) {
          message.success('删除成功');
          //  更新列表
          this.getRoleList();
        }
      },
    });
  };

  //更新状态
  changeState = obj => {
    this.props.dispatch({
      type: 'Role/setState',
      payload: obj,
    });
  };

  render() {
    const { roleList } = this.props.Role;

    const roleIcons = [
      images.superManage,
      images.spaceManage,
      images.systemManage,
      images.producter,
      images.operation,
      images.analyst,
      images.visiter,
    ];

    return (
      <div className={styles.TableContain}>
        <div className={styles.overView}>
          <div className={styles.title}>角色管理</div>
          <div className={styles.FormTable}>
            <Form layout={'inline'}>
              <Form.Item label="角色选择:" colon={false}>
                <Input
                  allowClear
                  placeholder="请输入角色"
                  value={this.state.search}
                  onChange={e => {
                    this.setState({ search: e.target.value }, () => {
                      this.searchChangeEvent?.next();
                    });
                  }}
                />
              </Form.Item>
            </Form>
          </div>

          <Row gutter={[16, 16]}>
            <Col span={6}>
              <Card
                hoverable={true}
                style={{ cursor: 'pointer' }}
                className={styles.cardTable}
                onClick={() => {
                  if (!authorityVerify('ADD_ROLE')) return;
                  this.changeState({
                    drawerVisible: true,
                    roleVisibledrawerType: 'add',
                    roleId: '',
                  });
                }}
              >
                <div className={styles.centerStyle}>
                  <div>
                    <img src={images.addRole} className={styles.img} />
                  </div>
                  <PlusOutlined className={styles.plusIcon} />
                  <div className={styles.addRole}>新增角色</div>
                </div>
              </Card>
            </Col>

            {roleList.map((item, i) => (
              <Col span={6}>
                <Card
                  hoverable={true}
                  className={styles.cardTable}
                  key={item.id}
                >
                  <div className={styles.box}>
                    <div className={styles.left}>
                      <div className={styles.icons}>
                        <img src={roleIcons[i]} className={styles.img} />
                        <div className={styles.leftCon}>
                          <div className={styles.userCount}>
                            {item.userCount}
                          </div>
                          <div className={styles.roleName}>{item.roleName}</div>
                        </div>
                      </div>
                    </div>
                    <div className={styles.right}>
                      <div className={styles.buttons}>
                        <Button
                          type="link"
                          onClick={() => {
                            if (!authorityVerify('UPDATE_ROLE')) return;
                            this.changeState({
                              drawerVisible: true,
                              roleVisibledrawerType: 'update',
                              roleId: item.id,
                            });
                          }}
                        >
                          编辑
                        </Button>
                        <Button
                          type="link"
                          onClick={() => {
                            if (!authorityVerify('DEL_ROLE')) return;
                            this.deleteRole(item.id);
                          }}
                          disabled={item.userCount > 0 ? true : false}
                        >
                          删除
                        </Button>
                      </div>
                    </div>
                  </div>
                </Card>
              </Col>
            ))}
          </Row>
          <div className={styles.drawerTable}>
            <RoleDrawer parentThis={this} />
          </div>
        </div>
      </div>
    );
  }
}
